<template>
  <div class="container position-relative" ref="container">
    <div class="row pt-4 pb-4">
      <div class="col-12 col-lg-3 order-2">
        <div class="postion-sticky sticky-top right" style="z-index: 899">
          <div class="border bg-white rounded shadow-sm">
            <div class="d-flex flex-column align-items-center">
              <div class="d-flex flex-column align-items-center mt-4">
                <div class="position-relative">
                  <router-link
                    :to="{ path: '/user', query: { id: worksinfo.artist.aid } }"
                  >
                    <img
                      class="rounded-circle"
                      style="width: 80px"
                      :src="worksinfo.artist.pic2"
                      alt=""
                    />
                  </router-link>
                </div>
                <div class="name mt-3">
                  <h4>{{ worksinfo.artist.name }}</h4>
                </div>
                <div class="pop mt-3">
                  <p>
                    人气:<span>{{ pop }}</span>
                  </p>
                </div>
                <div class="btns mt-3 mb-3">
                  <button class="rounded text-white bg-primary">关注</button>
                  <button class="rounded">私聊</button>
                  <button class="rounded">工作联系</button>
                </div>
              </div>
            </div>
            <div
              class="d-flex justify-content-center signedbox"
              v-if="worksinfo.artist.desc"
            >
              <p>
                {{ worksinfo.artist.desc }}
              </p>
            </div>
            <div class="honor border-top">
              <div>
                <span class="icon_star"></span> <span>王国推荐作者</span>
              </div>
              <div><span class="icon_red_v"></span> <span>插画师</span></div>
            </div>
          </div>
          <div
            class="
              mt-4
              bg-white
              d-flex
              justify-content-center
              love
              border
              bg-white
              rounded
              shadow-sm
            "
          >
            <a
              href="#"
              class="
                rounded
                d-flex
                justify-content-center
                align-items-center
                text-white
              "
            >
              <i class="fa fa-heart-o text-white" aria-hidden="true"></i>
              赞一个
            </a>
          </div>
          <div class="swiper mt-4">
            <a href="javascript:;">
              <img
                src="https://photo7n.gracg.com/e7926a5bd3a10b81216e6dd52a212a3a.jpg"
                alt=""
                class="rounded"
              />
            </a>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-9">
        <div class="left bg-white rounded border shadow-sm">
          <div
            class="
              d-flex
              flex-row
              justify-content-between
              left-content
              border-bottom
            "
          >
            <div class="d-flex flex-column left" style="flex: 1">
              <h3 class="name">{{ worksinfo.name }}</h3>
              <div class="time">发布于{{ worksinfo.time }}</div>
              <div class="d-flex">
                <p>
                  <img
                    class="icons"
                    src="https://www.gracg.com/_templates/css/img/see.png"
                    alt=""
                  /><span>{{ worksinfo.see }}</span>
                </p>
                <p>
                  <img
                    class="icons"
                    src="https://www.gracg.com/_templates/css/img/like.png"
                    alt=""
                  /><span>{{ worksinfo.love }}</span>
                </p>
                <p>
                  <img
                    class="icons"
                    src="https://www.gracg.com/_templates/css/img/like.png"
                    alt=""
                  /><span>{{ worksinfo.comment.number }}</span>
                </p>
              </div>
              <div class="d-flex flex-row">
                <div class="sign-box">
                  <img
                    class="sign-icons"
                    src="https://www.gracg.com/_templates/css/icon_rz/work_hot.png"
                    alt=""
                  />
                  <p>热门</p>
                </div>
                <div class="sign-box">
                  <img
                    class="sign-icons"
                    src="https://www.gracg.com/_templates/css/icon_rz/work_tuijian.png"
                    alt=""
                  />
                  <p>推荐</p>
                </div>
              </div>
            </div>
            <div
              class="
                right
                border
                d-flex
                flex-column
                justify-content-center
                mt-2
              "
            >
              <div class="d-flex">
                <img
                  src="https://s1.gracg.com/minappqr?albumid=1822714"
                  alt=""
                  style="width: 85px"
                />
              </div>
              <p>微信扫一扫小程序打开</p>
            </div>
          </div>
          <div
            class="tags d-flex flex-wrap align-items-center mt-2"
            v-if="getTag"
          >
            <img
              src="https://www.gracg.com/_templates/css/icon_rz/tag.png"
              alt=""
            />
            <a
              href="#"
              class="rounded border"
              v-for="(item, index) in getTag"
              :key="index"
            >
              {{ item }}</a
            >
          </div>
          <div class="jubao"><a href="javascript:;">举报</a></div>
          <div class="img-box">
            <div class="">
              <div
                class="mb-2"
                v-for="(item, index) in worksinfo.bigUrl"
                :key="index"
              >
                <img
                  class="loading"
                  src="https://qiniucssjs.gracg.com/loadingx2.gif "
                  alt=""
                  v-if="show"
                />
                <img v-else class="de-img rounded" :src="item" alt="" />
              </div>
              <!-- <div class="mb-2">
                <img
                  src="https://qiniucssjs.gracg.com/loadingx2.gif"
                  alt=""
                  v-if="false"
                />
              </div> -->
            </div>
            <div class="d-flex justify-content-between border-top pt-3">
              <div class="warining">
                来源: <span style="margin: 0 10px">网站</span>
                <i
                  class="fa fa-exclamation-triangle text-danger"
                  aria-hidden="true"
                ></i
                >举报作品
                <img
                  src="https://www.gracg.com/_templates/css/img/copyr.png"
                  style="width: 16px; margin-right: 10px"
                  alt=""
                />
                未经作者授权禁止转载
              </div>
              <div class="share-box">
                <a href="#" class="wb" title="分享到新浪微博"></a>
                <a href="#" class="wx" title="分享到微信"></a>
                <a href="#" class="qq" title="分享到QQ好友"></a>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-white rounded border shadow-sm mt-3 like">
          <div class="mb-2 mt-3">{{ worksinfo.love }}人赞</div>
          <div class="row">
            <div class="like-item" v-for="i in 20" :key="i">
              <img
                class="rounded-circle"
                src="https://photo7n.gracg.com/837e01a98601df9222bff2bbdc25fc88.jpg!100x100"
                alt=""
              />
              <p>新用户_hgMIHs</p>
            </div>
          </div>
        </div>
        <div class="bg-white rounded border shadow-sm mt-3 comment">
          <div class="msg">
            <div class="mb-2 mt-3">发表评论</div>
            <div class="d-flex flex-column">
              <div style="flex: 1">
                <textarea
                  id="text"
                  class="border"
                  placeholder="说点什么"
                ></textarea>
              </div>
              <div><button class="text-white rounded">发布</button></div>
            </div>
          </div>
          <div class="comment-content">
            <div class="record">条记录</div>
            <div class="text-center">没有评论</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      show: true,
      works: {
        id: 9,
        see: 38,
        love: 0,
        comment: {
          number: 0,
          clist: [],
        },
        talk: "双十一，大家都在干嘛呢?",
        tag: "厚涂，照片写生，美女",
        name: "狐面",
        artist: {
          aid: 32,
          name: "风启时",
          pic: "https://photo7n.gracg.com/2001535281_59485075c75bf8a28cd23e7fb2b385de.png!50x50",
          pop: 1.94,
          desc: "一个自由人开始了漫长的旅程，伴随着未知的结局······",
          pic2: "https://photo7n.gracg.com/2001535281_59485075c75bf8a28cd23e7fb2b385de.png!200x200",
        },
        time: "2021/11/13 15:15",
        imgUrl:
          "https://photo7n.gracg.com/2001535281_f86665ffd52783a2d18814b5398eec84.jpg!400x300",
        bigUrl: [
          "https://photo7n.gracg.com/2001535281_fda382506d1f4f9c2ac91190f0606a52.jpg?imageMogr2/auto-orient/thumbnail/1200x/blur/1x0/quality/98",
        ],
      },
      worksinfo: null,
    };
  },
  computed: {
    getTag() {
      let arr = this.worksinfo.tag.split("，");
      return arr;
    },
    pop() {
      let n = 0;
      if (this.worksinfo.artist.pop < 1) {
        n = this.worksinfo.artist.pop * 10000;
      } else {
        n = this.worksinfo.artist.pop + "万";
      }
      return n;
    },
    ...mapState(["recommendModule", "searchModule", "worksModule"]),
  },
  methods: {},

  created() {
    this.works = [
      ...this.recommendModule.index_recommend,
      ...this.recommendModule.recent_recommend,
      ...this.recommendModule.works_recommend,
      ...this.worksModule.workslist,
      ...this.worksModule.hot_works,
      ...this.searchModule.searchList,
    ];
    let id = this.$route.query.id;
    let worksinfo = this.works.filter((item) => {
      if (item.id == id) {
        return true;
      } else {
        return false;
      }
    });
    this.worksinfo = worksinfo[0];
    if (this.worksinfo.bigUrl) {
      setTimeout(() => {
        this.show = false;
      }, 500);
    }
  },
};
</script>

<style lang="less" scoped>
@import "../assets/reset";
.right {
  padding-left: 25px;
  box-sizing: border-box;
  .btns {
    button {
      background-color: white;
      border: 1px solid #ccc;
      margin: 0 5px;
      padding: 5px 8px;
      font-size: 14px;
    }
  }
  .signedbox {
    // height: 40px;
    position: relative;
    padding: 20px;
    // background-color: #f00;
    .pseudo {
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      background-size: cover;
      margin: 0 20px;
      position: absolute;
    }
    &::before {
      .pseudo();
      left: 0;
      top: 20px;
      background-image: url(http://www.gracg.com/_templates/css/icon_rz/yh_l.png);
    }
    &::after {
      .pseudo();
      right: 0;
      bottom: 20px;
      background-image: url(http://www.gracg.com/_templates/css/icon_rz/yh_r.png);
    }
    p {
      margin: 20px;
      font-size: 14px;
    }
  }
  .honor {
    padding: 15px 0;
    .ico {
      display: inline-block;
      width: 18px;
      height: 18px;
      // border: 1px solid #ccc;
      // background-color: #f00;
      // background-image: url(https://www.gracg.com/_templates/css/icon_rz/star.png?);
    }
    .icon_star {
      .ico();
      background-image: url(https://www.gracg.com/_templates/css/icon_rz/star.png);
    }
    .icon_red_v {
      .ico();
      background-image: url(https://www.gracg.com/_templates/css/icon_rz/red_v.png?1);
    }
  }
  .love {
    padding: 20px;

    a {
      display: block;
      width: 100%;
      height: 50px;
      // padding: 20px;
      font-weight: bold;
      font-size: 20px;
      text-align: center;
      background-color: #dc3545;
      .fa {
        margin-right: 5px;
      }
    }
  }
  .swiper {
    background-color: #fff;
    img {
      width: 100%;
      height: 107px;
    }
  }
}
.left {
  width: 100%;
  padding: 10px 20px;
  .left-content {
    .left {
      font-size: 13px;
      .name {
        font-weight: bold;
        margin-bottom: 10px;
      }
      .time {
        font-size: 13px;
        color: #999;
      }
      div {
        margin-bottom: 10px;
      }
      .icons {
        width: 16px;
        height: 16px;
        margin-right: 3px;
      }
      .icons ~ span {
        color: #666;
        margin-right: 7px;
      }
      .sign-box {
        margin-right: 10px;
        text-align: center;
        .sign-icons {
          width: 30px;
          height: 30px;
        }
        .sign-icons ~ p {
          font-size: 12px;
        }
      }
    }
    .right {
      width: 136px;
      height: 145px;
      padding: 13px 0 0 0;
      div {
        margin: 0 auto;
        margin-bottom: 20px;
      }
      p {
        text-align: center;
        font-size: 12px;
        color: #999;
      }
    }
  }
  .tags {
    img {
      width: 20px;
      height: 20px;
      margin-right: 20px;
    }
    a {
      display: inline-block;
      padding: 5px;
      font-size: 12px;
      margin-right: 5px;
    }
  }
  .img-box {
    text-align: center;
  }
  .jubao {
    a {
      display: inline-block;
      font-size: 12px;
      color: #999;
      margin: 20px 0;
    }
  }
  .img-box {
    width: 100%;
    .de-img {
      width: 100%;
      height: 100%;
    }
    .loading {
      width: 50px;
    }
  }
  .warining {
    font-size: 13px;
    color: #999;
  }
  .share-box {
    a {
      display: inline-block;
      background-image: url(https://photo7n.gracg.com/wt-share.png);
      width: 30px;
      height: 30px;
      margin: 0 5px;
    }
    .wb {
      background-position: -64px 0;
      &:hover {
        background-position: -64px -32px;
      }
    }
    .wx {
      background-position: -32px 0;
      &:hover {
        background-position: -32px -32px;
      }
    }
    .qq {
      background-position: 0 0;
      &:hover {
        background-position: 0 -32px;
      }
    }
  }
}
.like,
.comment {
  padding: 10px;
}
.like {
  font-size: 14px;
  font-weight: bold;
  .row {
    margin-bottom: 10px;
  }
  .like-item {
    width: 70px;
    text-align: center;
    margin-right: 10px;
    margin-top: 15px;

    img {
      width: 40px;
    }
    p {
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 12px;
      font-weight: lighter;
      overflow: hidden;
    }
  }
}
.comment {
  padding: 15px;
  font-size: 14px;
  .msg {
    font-weight: bold;
  }

  #text {
    width: 100%;
    resize: none;
    height: 76px;
    padding: 5px;
  }
  button {
    padding: 5px 15px;
    background-color: #53b3e0;
  }
  .comment-content {
    font-size: 14px;
    color: #999;
    .record {
      margin: 5px 0;
    }
  }
}
</style>